<template>
	<div class="data-statistics-card">
		<header class="header">
			<div class="header-left">
				<span>{{ props.title }}</span>
				<slot name="header-left"></slot>
			</div>
			<div class="header-right">
				<slot name="header-right"></slot>
			</div>
		</header>

		<slot name="Content"></slot>
	</div>
</template>

<script setup lang="ts">
interface Props {
	title: string;
	showControl?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
	title: '111',
	showControl: false
});
</script>

<style scoped lang="less">
.data-statistics-card {
	width: 100%;
	height: 100%;
	border: 1px solid @borderColor02;
	border-radius: 6px;
	padding: 12px 20px;
	background: @background02;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		height: 22px;

		.header-left {
			display: flex;
			align-items: center;
			gap: 8px;
			font-family: 'Noto Sans SC';
			font-size: 18px;
			font-weight: 700;
			font-style: normal;
			color: @text01;
		}
	}

	.header-right {
		display: flex;
	}

	.data-statistics-card-content {
		height: calc(100% - 22px);
	}
}
</style>
